<!--
 * @Description: 黑名单
 * @Author: liu (1427179517@qq.com)
 * @Date: 2023-05-05 16:55:57
 * @LastEditors: liu (1427179517@qq.com)
 * @LastEditTime: 2023-05-08 16:44:40
 * @FilePath: \jiekuan-app\src\subPages\other\blacklist.vue
-->

<template>
  <div class="page">
    <div class="page-header">
      <u-navbar
        title="黑名单"
        :background="nav_background"
        title-color="#fff"
        back-icon-color="#fff"
        :height="60"
        :border-bottom="false"
      ></u-navbar>
    </div>
    <div class="page-content">
      <div class="item u-flex u-row-between u-col-center" v-for="(item, index) in listData" :key="index">
        <div class="u-flex u-col-center">
          <image :src="item.icon" class="img" alt="" />
          <div class="u-m-l-30">
            <div>{{ item.nickname }}</div>
            <div class="text u-m-t-44">{{ gender_msg[item.gender] }}·{{ item.age }}岁</div>
          </div>
        </div>
        <button class="btn" @click="handleClick({ type: 'remove', item: item })">移除</button>
      </div>
      <div class="hint">没有更多了</div>
    </div>
    <div class="page-footer"></div>
  </div>
</template>

<script>
export default {
  name: 'Blacklist', // 页面名称
  components: {}, // 挂载组件
  props: {}, // 组件传值
  data() {
    return {
      nav_background: { backgroundImage: 'transparent' },
      listData: [
        { name: '小雨', sex: '女', age: '22' },
        { name: '小雨', sex: '女', age: '22' },
        { name: '小雨', sex: '女', age: '22' },
      ], // 数据列表
      page: 1, // 当前页数
      per_page: 10, // 每页个数
      totalPages: 0, // 总页数（防止频繁上拉刷新）
      gender_msg: {
        0: '未知',
        1: '男',
        2: '女',
      }, // 性别
    }
  },
  computed: {}, // 计算机属性 类似与data概念
  watch: {}, // 监控data中数据变化
  created() {}, // 生命周期-创建完成(可以访问当前this实例)
  mounted() {}, // 生命周期-挂载完成(可以访问DOM元素)
  methods: {
    handleClick(options) {
      const { type, item } = options
      switch (type) {
        case 'remove':
          this.apiPostBlockMember(item.blockedMemberId)
          break
        default:
          break
      }
    },
    // 获取黑名单列表
    apiGetBlockList(isRechBottom) {
      const params = {
        pageNum: this.page,
        pageSize: this.per_page,
      }
      this.$u.api.GetBlockList(params).then((res) => {
        const { data } = res
        if (isRechBottom) {
          this.listData = this.listData.concat(data)
          return
        }
        this.listData = data
        // this.totalPages = Math.ceil(total / this.per_page)
      })
    },
    // 移除黑名单
    apiPostBlockMember(id) {
      this.$u.api.PostBlockMember({ blockedMemberId: id }).then((res) => {
        this.$toast('移除成功')
        this.page = 1
        this.apiGetBlockList()
      })
    },
  }, // 挂载一些方法
  onLoad(options) {
    this.apiGetBlockList()
    console.log('onLoad', options, Date.now())
  }, // 生命周期回调—监听页面加载
  onReachBottom() {
    if (this.page < this.totalPages) {
      this.page += 1
      this.apiGetBlockList(true)
    }
  },
  onShow() {}, // 生命周期回调—监听页面显示
  onReady() {}, // 生命周期回调—监听页面初次渲染完成
  onHide() {}, // 生命周期回调—监听页面隐藏
  onUnload() {}, // 生命周期回调—监听页面卸载
}
</script>

<style lang="scss" scoped>
.page {
  background-image: url('http://minio.tianhong.mobi/mall/xiaoq/home_bg.png');
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
}
.page-content {
  padding: 20rpx 40rpx 0 34rpx;
}
.item {
  padding: 22rpx 0;
  font-size: 31rpx;
  font-family: Microsoft YaHei UI;
  font-weight: 400;
  color: #ffffff;
}
.img {
  width: 110rpx;
  height: 110rpx;
  border-radius: 50%;
}
.text {
  font-size: 21rpx;
}
.btn {
  width: 100rpx;
  height: 50rpx;
  background: #ffffff;
  border-radius: 25rpx;
  font-size: 21rpx;
  font-family: Microsoft YaHei UI;
  font-weight: 400;
  color: #000000;
  line-height: 50rpx;
  padding: 0;
  margin: 0;
}
.hint {
  font-size: 25rpx;
  font-family: Microsoft YaHei UI;
  font-weight: 400;
  color: #c8c8c8;
  margin-top: 68rpx;
  text-align: center;
}
</style>
